<template>
  <view class="load" v-if="!load">
    <u-loading-icon
      mode="circle"
      inactive-color="#fff"
      text="正在加载..."
      vertical
    ></u-loading-icon>
  </view>
  <view v-else class="user_edit wap">
    <view class="group group_hd">
      <view class="lab"><!-- <view class="must">*</view> -->头像</view>
      <view class="inp_box">
        <button
          class="user_header_btn"
          open-type="chooseAvatar"
          hover-class="none"
          @chooseavatar="chooseavatar"
        >
          <view class="user_headerimg">
            <view class="cover_btn">
              <image
                class="image_user"
                v-if="isHeader"
                @error="isHeader = false"
                :src="reqData.PhotoUrl"
                mode="aspectFill"
              />
              <image
                class="iamge_icon"
                v-else
                src="@/static/img/hd.png"
                mode=""
              />
            </view>
            <uni-icons type="right" size="18" color="#c6c6c6"></uni-icons>
          </view>
        </button>
      </view>
    </view>
    <view class="group">
      <view class="lab"><!-- <text class="must">*</text> -->昵称</view>
      <view class="inp_box">
        <input
          type="nickname"
          maxlength="10"
          v-model="reqData.TrueName"
          placeholder="输入昵称(最多输入10个字)"
        />
      </view>
    </view>
    <view class="group">
      <view class="lab">手机号</view>
      <view class="inp_box" style="margin-right: 16rpx">
        <input
          type="number"
          maxlength="11"
          v-model="reqData.Phone"
          placeholder="请输入手机号"
        />
        <!-- #ifdef MP-WEIXIN -->
        <button
          class="s_btn"
          open-type="getPhoneNumber"
          @getphonenumber="getNums"
        >
          绑定手机
        </button>
        <!-- #endif -->
      </view>
    </view>
    <view class="group">
      <view class="lab">我的技能</view>
      <view class="inp_box" @click="isskill">
        <!-- <input type="text" disabled placeholder="选择我的标签" /> -->
        <view class="inp_text"> 已选择{{ numChoose }}个技能 </view>
      </view>
      <view class="icon_box"
        ><uni-icons type="right" size="18" color="#c6c6c6"></uni-icons
      ></view>
    </view>
    <view class="img_list">
      <view class="title">{{ "教练图片(至少传三张)" }}</view>
      <view class="img_box">
        <view class="img" v-for="(item, i) in imgArr" :key="i">
          <image :src="item.tempUrl" mode="aspectFill"></image>
          <view class="icon" @click.stop="delImg(i)">
            <image
              src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png"
              mode=""
            ></image>
          </view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <view class="img addimg" @tap="upload" v-if="imgArr.length < 9">
          <image
            src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png"
            mode=""
          ></image>
        </view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length < 9">
          <image
            src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png"
            mode=""
          ></image>
        </view>
        <!-- #endif -->
      </view>
    </view>
    <view class="saveBox">
      <view class="btn saveBtn" @click="sub">保存</view>
    </view>

    <uni-popup ref="gift" type="center">
      <view class="sporttext"
        >我的技能：<text class="maxtag">{{ "(最多选择三个技能)" }}</text></view
      >
      <view class="sportbox">
        <view
          @click="skitype(item.Code, item.checked)"
          class="sport"
          v-for="(item, index) in sportList"
          :key="index"
          :class="item.checked ? 'text4' : ''"
        >
          {{ item.Code }}
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { isCheckImage } from "../../common/imgExamine";
export default {
  components: {},
  data() {
    return {
      isHeader: true,
      load: true,
      reqData: {
        ID: "",
        PhotoUrl: "", // 头像
        TrueName: "",
        Resume: "",
        Skills: "",
        Phone: "",
      },
      imgArr: [],
      skList: [],
      sportList: [],
    };
  },
  computed: {
    canChoose() {
      const list = this.sportList;
      let num = 0;
      for (let i = 0; i < list.length; i++) {
        if (list[i].checked) {
          num++;
        }
      }
      let yesNo = num >= 3 ? false : true;
      return yesNo;
    },
    numChoose() {
      const list = this.sportList;
      let num = 0;
      for (let i = 0; i < list.length; i++) {
        if (list[i].checked) {
          num++;
        }
      }
      return num;
    },
  },
  onLoad(e) {
    if (e.id) {
      this.teDetail(e.id);
    }
    this.getSportType();
  },
  onShow() {},
  methods: {
    getNums(e) {
      let _this = this;
      uni.login({
        provider: "weixin",
        success: async (res) => {
          let d = {
            encryptedData: e.detail.encryptedData,
            code: res.code,
            aesIv: e.detail.iv,
          };
          let res3 = await _this.$api.post("User/GetPhoneNumber", d);
          if (res3.data) {
            _this.reqData.Phone = res3.data;
            _this.$pv.msg("获取成功");
          } else {
            _this.$pv.msg("获取失败");
          }
        },
        fail: (err) => {
          uni.showModal({
            content: "获取失败",
            showCancel: false,
          });
        },
      });
    },
    isskill() {
      this.$refs["gift"].open();
    },
    skitype(Code, checked) {
      let list = this.sportList;
      const maxNum = 3;
      if (!checked && !this.canChoose) {
        this.$pv.msg("最多选" + maxNum + "个标签");
        return;
      }
      for (let i = 0; i < list.length; i++) {
        list[i].checked =
          list[i].Code == Code ? !list[i].checked : list[i].checked;
      }
    },
    async getSportType() {
      let res = await this.$api.post("Catalog/GetDictionary", {
        Type: "SportType",
      });
      if (res.code == 0) {
        this.sportList = res.data;
        for (let i = 0; i < this.sportList.length; i++) {
          this.$set(
            this.sportList[i],
            "checked",
            this.skList.includes(this.sportList[i].Code)
          );
        }
      }
    },
    async teDetail(id) {
      let res = await this.$api.post("Technicians/Detail", {
        ID: id,
      });
      if (res.code == 0) {
        const { ID, TrueName, PhotoUrl, Resume, Skills, Phone } = res.data;
        let imgdeList = Resume.split(",");
        for (let i = 0; i < imgdeList.length; i++) {
          const data = {
            duration: 0,
            fileType: "image",
            flieUrl: imgdeList[i],
            tempUrl: imgdeList[i],
            netPath: imgdeList[i],
          };
          this.imgArr.push(data);
        }
        this.reqData.ID = ID;
        this.reqData.PhotoUrl = PhotoUrl;
        this.reqData.Phone = Phone;
        this.reqData.TrueName = TrueName;
        this.reqData.Skills = Skills;
        this.skList = Skills.split(",");
        this.load = true;
      }
    },
    async sub() {
      let Skillist = [];
      for (let i = 0; i < this.sportList.length; i++) {
        if (this.sportList[i].checked) {
          Skillist.push(this.sportList[i].Code);
        }
      }
      if (!this.reqData.PhotoUrl) {
        this.$pv.msg("请上传头像");
        return;
      }
      if (!this.reqData.TrueName) {
        this.$pv.msg("请输入昵称");
        return;
      }
      if (Skillist.length == 0) {
        this.$pv.msg("请至少一个技能");
        return;
      }
      if (this.imgArr.length < 3) {
        this.$pv.msg("图片至少传入三张");
        return;
      }
      this.reqData.Skills = Skillist.join(",");
      let imglist = [];
      for (let i = 0; i < this.imgArr.length; i++) {
        imglist.push(this.imgArr[i].netPath);
      }
      this.reqData.Resume = imglist.join(",");
      let res = await this.$api.post("Technicians/Edit", this.reqData);
      if (res.code == 0) {
        this.$pv.msg("保存成功");
        this.imgArr = [];
        this.teDetail(this.reqData.ID);
      }
    },
    // 文件上传
    async uploading(url, tempKey) {
      console.log("url ----------" + url);

      const r = await this.$upload(url, (pro) => {
        this.imgArr.forEach((item) => {
          if (item.tempKey == tempKey) {
            item.pro = pro;
          }
        });
      });
      this.imgArr.forEach((item) => {
        if (item.tempKey == tempKey) {
          item.netPath = r;
        }
      });

      console.log("upload file " + r);
      // console.log(this.imgArr,'1111111');
      // this.formdata.PhotoUrl.push(r);
      // this.formdata.PhotoUrl = r
    },
    upload() {
      let _this = this;
      uni.chooseMedia({
        count: 9 - this.imgArr.length,
        mediaType: ["image"],
        sourceType: ["album", "camera"],
        maxDuration: 30,
        camera: "back",
        success(res) {
          console.log(res);
          res.tempFiles.forEach(async (item) => {
            let o = {
              duration: 0,
              fileType: item.fileType,
              tempUrl: item.tempFilePath,
              flieUrl: item.tempFilePath,
              tempKey: uni.$u.guid(8),
              pro: 0,
            };

            _this.imgArr.push(o);

            let rex = await _this.uploading(o.flieUrl, o.tempKey);
            console.log("rex-------", rex);
          });
        },
      });
    },
    selectImg_APP() {
      let _this = this;
      uni.showActionSheet({
        itemList: ["选择照片", "取消"],
        success: function (res) {
          if (res.tapIndex == 0) {
            let ind = 1;
            uni.chooseImage({
              // count:  允许上传的照片数量
              count: 9 - this.imgArr.length,
              // sizeType:  original 原图，compressed 压缩图，默认二者都有
              sizeType: ["original", "compressed"],
              sourceType: ["album"],
              success(res) {
                console.log(res);
                res.tempFiles.forEach(async (item) => {
                  let o = {
                    duration: 0,
                    fileType: "image",
                    tempUrl: item.path,
                    flieUrl: item.path,
                    tempKey: uni.$u.guid(8),
                    pro: 0,
                  };

                  _this.imgArr.push(o);

                  let rex = await _this.uploading(o.flieUrl, o.tempKey);
                });
              },
            });
            return;
          }
        },
        fail: function (res) {},
      });
    },
    delImg(i) {
      this.imgArr.splice(i, 1);
      // this.formdata.PhotoUrl.splice(i, 1);
    },
    async chooseavatar(e) {
      console.log(e);
      try {
        let _this = this;
        let pathlist = [{ path: e.detail.avatarUrl }];
        let res = await isCheckImage(pathlist, "all");
        // let res = await ieChooseImage(1,'all');
        console.log("---------鉴别", res);
        if (res[0]?.code == 0) {
          _this.reqData.HeadImgUrl = res[0]?.url;
          _this.isHeader = true;
        } else {
          uni.showToast({
            title: res[0]?.msg,
            icon: "none",
            duration: 2000,
          });
        }
      } catch (error) {
        this.$pv.msg("图片上传失败");
        console.log(error);
      }
    },
  },
};
</script>
<style lang='scss'>
button[plain] {
  border: 0;
}
button::after {
  border: none;
}
.user_edit {
  padding-bottom: 32rpx;
  background: #fff;
  margin-top: 16rpx;
}

.tip {
  margin-top: 32rpx;
  height: 70rpx;
  background: #fff7e0;
  border-radius: 4rpx;
  color: #e3a029;
  line-height: 70rpx;
  text-align: center;
}

.user_header_btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  border-radius: 0;
  .user_headerimg {
    display: flex;
    align-items: center;
  }
}

.user_header,
.cover_btn {
  border-radius: 10rpx;
  overflow: hidden;
  height: 100rpx;
  width: 100rpx;
  background: rgba(255, 255, 255, 0.1);
  margin-right: 16rpx;
  display: flex;
  // text-align: center;
  justify-content: center;
  align-items: center;

  .iamge_icon {
    height: 60rpx;
    width: 60rpx;
  }

  .image_user {
    height: 100%;
    width: 100%;
    border-radius: 50%;
  }
}

.lab {
  // height: 90rpx;
  // line-height: 90rpx;
  padding-right: 10rpx;
  color: #333333;
  font-size: 32rpx;
  display: flex;
  .must {
    color: #ef4034;
    font-size: 32rpx;
    margin-top: 7rpx;
  }
  .msg {
    display: inline-block;
    padding-left: 10rpx;
    font-size: 28rpx;
    color: #dd3232;
  }
}

.group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;

  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2rpx;
    content: "";
    transform: scaleY(0.6);
    background-color: #e4e4e4;
  }

  .inp_box {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;

    input {
      width: 100%;
      text-align: right;
      padding: 32rpx 0;
      color: #333;
      font-size: 32rpx;
    }
    .inp_text {
      font-size: 32rpx;
      padding: 32rpx 0;
    }
    .radio_s {
      display: flex !important;
      height: 100rpx;
    }
    .item_check {
      padding: 10rpx;
      display: flex;
      flex-direction: row;

      .desc {
        color: #000 !important;
      }
    }
  }
  .diyPadding {
    padding: 32rpx 0;
  }
  .icon_box {
    height: 40rpx;
    width: 40rpx;
    line-height: 40rpx;
  }

  .inp_append {
    margin-left: 8rpx;
  }

  .s_btn {
    color: #fff;
    font-size: 24rpx;
    width: 170rpx !important;
    height: 60rpx !important;
    border-radius: 5rpx;
    background-color: #706eee;
    margin: 0 0 0 20rpx;
  }
}

.group_check {
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  line-height: 90px;
  height: 190rpx;

  .inp_box_c {
    flex: 1;
    display: flex;
    flex-direction: column;

    view {
      height: 70rpx;
      color: #666666;
    }

    input {
      width: 100%;
      text-align: right;
    }
  }
}
.group_img {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  line-height: 180rpx;

  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2rpx;
    content: "";
    transform: scaleY(0.6);
    background-color: #e4e4e4;
  }
  .wxlab {
    height: 60rpx;
    padding-right: 10rpx;
    color: #333333;
    font-size: 32rpx;
    line-height: 60rpx;
    .must {
      color: #ef4034;
      font-size: 32rpx;
    }
    .desc {
      color: #dc7e78;
      font-size: 28rpx;
    }
    .req_t {
      color: #ff557f !important;
    }
  }
  .inp_box {
    flex: 1;
    display: flex;
    align-items: center;

    input {
      padding: 32rpx 0;
      width: 100%;
      text-align: right;
    }
  }
  .inp_box_c {
    flex: 1;
    display: flex;
    flex-direction: column;

    view {
      height: 70rpx;
    }

    input {
      width: 100%;
      text-align: right;
    }
  }
}
.group_hd {
  height: auto;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}

.m40 {
  margin-top: 50rpx;
}

.group_textarea {
  margin-top: 24rpx;
  flex: 1;
  height: 200rpx;
  padding-top: 12rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  // border-style: none;
  border-radius: 16rpx;
  background-color: #f8f8f8;
  /deep/ .u-textarea {
    background: none !important;
    // border-bottom: none !important;
    // border-color: rgba(64, 64, 64, 1) !important;
    padding-left: 20rpx;
  }
  /deep/ .u-border {
    border: none;
  }
  /deep/ .u-textarea__count {
    background: none !important;
    color: #000 !important;
  }

  /deep/ .u-textarea__field {
    color: #000 !important;
  }
}

.inp_box_r {
  display: flex;
  justify-content: flex-end;
}

.text_r {
  text-align: right;
}

.group_warp {
  padding-bottom: 20rpx;
  display: block;
  height: auto;
}

.imgvideo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  &::after {
    height: 1px;
    width: 220rpx;
    display: block;
    content: "";
  }

  .item {
    position: relative;
    margin-top: 15rpx;
    width: 220rpx;
    height: 220rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;

    .pro {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      text-align: center;
      color: #888;
    }

    image {
      height: 100%;
      width: 100%;
      border-radius: 16rpx;
    }

    .del_con {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.4);
      height: 40rpx;
      width: 40rpx;
      text-align: center;
      line-height: 40rpx;
      border-radius: 0 16rpx 0 16rpx;
    }

    .bottomset {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 50rpx;
      background: #404040;
      color: #fff;
      text-align: center;
      align-items: center;
      font-size: 24rpx;
      line-height: 50rpx;
      opacity: 0.7;
    }
  }

  .item_add {
    position: relative;

    &::before,
    &::after {
      display: block;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      position: absolute;
      height: 40rpx;
      width: 8rpx;
      border-radius: 8rpx;
      background: #fff;
      border-radius: 10rpx;
    }

    &::before {
      transform: rotate(90deg);
    }
  }
}

.iamge_list_sm {
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .tit {
    width: 100%;
    line-height: 2;
  }

  .item {
    height: 90rpx;
    width: 90rpx;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .more {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4rpx;
    background: rgba(254, 240, 188, 0.1);
  }
}
.saveBox {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  left: 0;
  bottom: 0;
  padding: 20rpx 40rpx 50rpx;
  background-color: #fff;
  .saveBtn {
    width: 100%;
    background: #706eee;
    border-radius: 44rpx;
  }
}
.img_list {
  padding-top: 30rpx;
  border-top: 1rpx solid #e4e4e4;
  box-sizing: border-box;

  // padding: 26rpx 32rpx;
  .title {
    font-size: 30rpx;
  }

  image {
    width: 100%;
    height: 100%;
  }

  .img_box {
    display: flex;
    align-items: center;
    // justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .videobox {
    padding: 32rpx;
    position: relative;

    > view {
      width: 100%;
      height: 300rpx;
      border-radius: 16rpx;
      overflow: hidden;

      video {
        width: 100%;
        height: 100%;
      }
    }

    .icon {
      position: absolute;
      right: 10rpx;
      top: 10rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // border-radius: 50%;
      z-index: 10;

      image {
        width: 40rpx;
        height: 40rpx;
        background: #fff;
        border-radius: 50%;
      }
    }
  }

  .img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx;
    margin-right: 16rpx;
    margin-top: 16rpx;
    // overflow: hidden;
    position: relative;

    image {
      border-radius: 8rpx;
    }

    .icon {
      position: absolute;
      right: -20rpx;
      top: -14rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // border-radius: 50%;
      z-index: 10;

      image {
        width: 40rpx;
        height: 40rpx;
        background: #fff;
        border-radius: 50%;
      }
    }
  }

  .img:nth-child(3n) {
    margin-right: 0;
  }

  .addimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f6f6;

    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
}
.sporttext {
  font-size: 36rpx;
  color: #0d0d0d;
  font-weight: bold;
  padding-left: 84rpx;
  padding-top: 35rpx;
  background: white;
  border-radius: 18rpx 18rpx 0 0;
}
.maxtag {
  font-size: 24rpx;
  color: #333333;
}
.sportbox {
  width: 700rpx;
  padding: 58rpx;
  background: white;
  border-radius: 0 0 18rpx 18rpx;
  display: flex;
  flex-wrap: wrap;
  .sport {
    width: 152rpx;
    height: 72rpx;
    border-radius: 8rpx;
    background-color: #f7f7f7;
    text-align: center;
    line-height: 72rpx;
    color: #333333;
    font-size: 28rpx;
    margin-left: 24rpx;
    margin-bottom: 24rpx;
  }
  .text4 {
    color: #fff !important;
    background-color: #706eee !important;
  }
}
</style>